$(function(){
    // 文章的发布状态
    let state = null

    $('.btn_pub').on('click',function(){
        state = '已发布'
    })
    $('.btn_cg').on('click',function(){
        state = '草稿'
    })

    // 定义工具栏的配置项
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike', 'image'],        // toggled buttons
        ['blockquote', 'code-block'],
            
        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
            
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],
            
        ['clean']                                         // remove formatting button
    ];
    // 初始化富文本编辑器
    const quill = new Quill('#editor', {
        // 指定工具栏的配置
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow'
    });
    
    // 初始化文章的分类
    function initCateList(){
        // 发起 Ajax 请求
        $.get('/my/article/cates',function(res){
            if(res.status === 0){
                // 基于模板引擎，动态渲染下拉菜单
                const htmlStr = template('tmpl-select',res)
                $('[name="cate_id"]').html(htmlStr)

                // 1.为富文本编辑器中的 select 添加 lay-ignore 
                //      目的：为了防止 layui 美化富文本编辑器的下拉菜单
                $('.ql-toolbar select').attr('lay-ignore','')
                // 2.让 layui 重新渲染表单中的下拉菜单
                //      刷新select选择框渲染
                layui.form.render('select'); 
                // 3.将富文本编辑器中的下拉菜单隐藏掉
                $('.ql-toolbar select').css('display','none')
            }
        })
    }

    // 调用初始化文章分类的方法
    initCateList()

    // 1. 初始化图片裁剪器
    const $image = $('#image')  
    // 2. 裁剪选项
    const corrperOptions = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3. 初始化裁剪区域
    $image.cropper(corrperOptions)

    //   为选择封面的按钮绑定点击事件
    $('.btn-choose-img').on('click',function(){
        // 模拟文件上传按钮的点击事件
        $('#file').click()
    })
    // 为文件选择框绑定 change 事件
    $('#file').on('change',function(e){
        // 拿到要上传的文件
        const files = e.target.files
        // 判断是否拿到了文件
        if(files.length === 0) return

        // 进行封面的替换
        const imgSrc = URL.createObjectURL(files[0])
        // 销毁旧裁剪区域
        $image.cropper('destroy')
        // 为裁剪区域的 img 重新设置 url 地址
        $image.attr('src',imgSrc)
        // 重新初始化裁剪区域
        $image.cropper(corrperOptions)
    })

    // 为发布的表单 绑定 submit 事件
    $('.form-pub').on('submit',function(e){
        // 阻止表单默认提交事件
        e.preventDefault()
        // 1. 获取数据，把要提交的数据准备好。
        const fd = new FormData()
        //  1.1 把文章的标题存到 fd 里面
        fd.append('title',$('[name="title"]').val().trim())
        //  1.2 把类别存入到 fd 中
        fd.append('cate_id',$('[name="cate_id"]').val().trim())
        //  1.3 把文章内容存到 fd 里面
        fd.append('content',quill.root.innerHTML)
        //  1.4 把文章的状态 存到 fd 中
        fd.append('state',state)
        // 1.5 把裁剪的封面存到 fd 中
        $image.cropper('getCroppedCanvas',{ //创建 canvas 画布
            // 设置画布的 宽和高
            width: 400,
            height:200
        }).toBlob(function(blob){
            // 形参中的 blob 就是裁剪得到的图片文件
            // 将裁剪的图片添加到 fd 请求体中
            fd.append('cover_img',blob)

            // 2.把准备好的数据，发送给服务器
            $.ajax({
                type:'POST',
                url:'/my/article/add',
                data:fd,
                // 注意：如果提交的是 fd 格式的数据，必须有如下两个配置项
                processData:false,
                contentType:false,
                success:function(res){
                    layer.msg(res.message)
                    if(res.status === 0){
                        // 发布成功之后，跳转到文章列表页面
                        location.href = '/article/art_list.html'
                    }
                }
            })
        })

        
    })
})